<!-- 第二页-->
<template>

  <div>
    <!-- <div id="page-two" class="page-two" :style=" 'height:'+curHeight+'px' ">1</div> -->
    <!-- type="textarea"
    :autosize="{ minRows: 1, maxRows: 4}" -->

    <!--el-collapse v-model="activeNames" style="border: 0;">
      <el-collapse-item style="height: 0; margin-botttom:0;  background-color: unset" name="nav"-->
    <!-- 导航栏 -->
    <!--    <nav-menu :pageIndex="pageIndex"></nav-menu>-->
    <!--/el-collapse-item>
  </el-collapse-->
    <div id="page-two" class="page-two">

      <el-col :span="19">
        <el-row>
          <div class="grid-content bg-card" style="font-size:24px;">{{ retData.title }}</div>
        </el-row>
        <el-row type="flex" style="flex-wrap: wrap; flex-direction: row">
          <el-col :span="6" v-for="(item,index) in retData.author" :key="index">
            <el-col :span="6"><i class="el-icon-user" style=""></i></el-col>
            <div class="grid-content bg-card-light" style="margin-right: 1vw; margin-top: 1vh;">
              <el-link :href="'/#/person?id='+(retData.nodesData.filter(function(n) {return n.name === item;})[0].id)">
                {{ item }}
              </el-link>
            </div>
          </el-col>
        </el-row>
        <div class="grid-content bg-card-light">{{ retData.conference }}</div>
        <div class="grid-content bg-card-light">{{ retData.periodical }}</div>
        <el-divider></el-divider>
        <div class="grid-content bg-card" style="font-size:18px;">关键词：</div>
        <el-row type="flex" style="flex-wrap: wrap; padding-left: 1vw;">
          <div v-for="(item,index) in retData.keywords" :key="index" style="margin:1vh 0.5vw; ">
            <div class="grid-content bg-card-light" style="white-space:nowrap; background: #e5e9f2;">{{ item }}</div>
          </div>
        </el-row>
        <div class="grid-content bg-card" style="font-size:18px;">摘要：</div>
        <div class="grid-content bg-card-light" v-html="retData.abstract"></div>
        <div class="grid-content bg-card" style="font-size:18px;">关系图：</div>
        <div class="svg-set" style="display: flex;">

          <svg width="1000" height="600"></svg>
          <el-col :span="4">
            <div :href="'#/paper?id='+svgId" class="grid-content bg-card" style="word-wrap:break-word;">{{ svgTitle }}
            </div>
            <div class="grid-content bg-card-light">{{ svgType }}</div>
            <div class="grid-content" style="display: flex;">
              <el-link v-if="svgType === 'paper'" type="primary" :href="'/#/paper?id='+svgId" target="_blank">更多信息
              </el-link>
              <el-link v-if="svgType === 'author'" type="primary" :href="'/#/person?id='+svgId" target="_blank">更多信息
              </el-link>
            </div>
          </el-col>
        </div>
      </el-col>
      <el-col :span="1">
        <!--el-divider direction="vertical"></el-divider-->
      </el-col>
      <el-col :span="4" style="text-align:left;">

        <div class="grid-content bg-card" style="font-size:18px;">修改源文件：</div>
        <el-link class="grid-content bg-card-light" type="primary" v-if="!isUpdateSet" @click="onUpdateSet">打开编辑器
        </el-link>
        <div class="update-set" v-if="isUpdateSet">
          <textarea
            rows="10"
            cols="20"
            style="font-size: 18px;"
            v-model.lazy="retData.raw"
            :disabled="false">
          </textarea>
          <el-button type="primary" @click="onUpdateText">{{ $t('button.save') }}</el-button>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

// import NavMenu from "@/views/nav-menu/NavMenu.vue"; //导航栏组件
import JsonTree from 'vue-json-tree'
import * as d3 from 'd3'

Vue.component('json-tree', JsonTree)
export default {
  components: {
    // SearchLink,
    // NavMenu
  },
  data () {
    return {
      pageIndex: '1', // 当前页的序号
      scrolltop: 0, // 滑轮距顶部的距离

      activeNames: ['nav'], // 折叠面板显示导航栏nav
      curHeight: '', // 窗口高度
      activeName: 'first',

      dataList: [],
      retJson: '{}',
      retData: {}, // {"Chinese_abstract": "\u57fa\u4e8e\u76ee\u524d\u5e94\u7528\u6781\u4e3a\u5e7f\u6cdb\u4e00\u7c7b\u65e0\u4eba\u76f4\u5347\u673a ,\u8bba\u8ff0\u4e86\u5b83\u7684\u65cb\u7ffc\u64cd\u7eb5\u673a\u6784 ,\u7279\u522b\u662f\u5bf9\u5b83\u7684\u4e3b\u65cb\u7ffc\u548c\u7a33\u5b9a\u6746\u7684\u52a8\u529b\u5b66\u7279\u6027\u8fdb\u884c\u4e86\u8be6\u5c3d\u63cf\u8ff0 ,\u901a\u8fc7\u5bf9\u5b83\u4eec\u7684\u52a8\u529b\u7279\u6027\u5206\u6790\u4e3a\u4ee5\u540e\u5efa\u7acb\u65e0\u4eba\u76f4\u5347\u673a\u7684\u516d\u81ea\u7531\u5ea6\u8fd0\u52a8\u65b9\u7a0b\u6253\u4e0b\u4e86\u57fa\u7840", "resource_code": "CJFD", "author": ["\u7aa6\u5c1a\u6210", "\u5218\u4eae"], "English_keywords": ["unmanned helicopter", "control mechanism", "rotor", "flybar"], "English_abstract": "Based on a kind of unmanned helicopters those are applied widely now. This paper presents its control mechanism of rotor transmission, especially on the dynamics of its main rotor and flybar. The analysis of its dynamics would lead to the derivation of the equations of motion for full six degree-of-freedom.", "Chinese_keywords": ["\u65e0\u4eba\u76f4\u5347\u673a", "\u64cd\u7eb5\u673a\u6784", "\u65cb\u7ffc", "\u7a33\u5b9a\u6746"], "raw": "['<\u7bc7\u540d>=\u4e00\u7c7b\u65e0\u4eba\u76f4\u5347\u673a\u7684\u65cb\u7ffc\u64cd\u7eb5\u673a\u6784\u7684\u5206\u6790\\n', '<\u4f5c\u8005>=\u7aa6\u5c1a\u6210,\u5218\u4eae\\n', '<\u673a\u6784>=\u4e0a\u6d77\u5927\u5b66\u7cbe\u5bc6\u673a\u68b0\u7cfb,\u4e0a\u6d77\u5927\u5b66\u7cbe\u5bc6\u673a\u68b0\u7cfb \u4e0a\u6d77200072\\n', '\\n', '\\n', '\\n', '\\n', '\\n', '\\n', '\\n', ',\u4e0a\u6d77200072\\n', '<\u4e2d\u6587\u5173\u952e\u8bcd>=\u65e0\u4eba\u76f4\u5347\u673a;;\u64cd\u7eb5\u673a\u6784;;\u65cb\u7ffc;;\u7a33\u5b9a\u6746\\n', '<\u4e2d\u6587\u6458\u8981>=\u57fa\u4e8e\u76ee\u524d\u5e94\u7528\u6781\u4e3a\u5e7f\u6cdb\u4e00\u7c7b\u65e0\u4eba\u76f4\u5347\u673a ,\u8bba\u8ff0\u4e86\u5b83\u7684\u65cb\u7ffc\u64cd\u7eb5\u673a\u6784 ,\u7279\u522b\u662f\u5bf9\u5b83\u7684\u4e3b\u65cb\u7ffc\u548c\u7a33\u5b9a\u6746\u7684\u52a8\u529b\u5b66\u7279\u6027\u8fdb\u884c\u4e86\u8be6\u5c3d\u63cf\u8ff0 ,\u901a\u8fc7\u5bf9\u5b83\u4eec\u7684\u52a8\u529b\u7279\u6027\u5206\u6790\u4e3a\u4ee5\u540e\u5efa\u7acb\u65e0\u4eba\u76f4\u5347\u673a\u7684\u516d\u81ea\u7531\u5ea6\u8fd0\u52a8\u65b9\u7a0b\u6253\u4e0b\u4e86\u57fa\u7840\\n', '<\u82f1\u6587\u7bc7\u540d>=The Analysis of Control Mechanism of a Kind of Unmanned Helicopter\\n', '<\u82f1\u6587\u6458\u8981>=Based on a kind of unmanned helicopters those are applied widely now. This paper presents its control mechanism of rotor transmission, especially on the dynamics of its main rotor and flybar. The analysis of its dynamics would lead to the derivation of the equations of motion for full six degree-of-freedom.\\n', '<\u82f1\u6587\u5173\u952e\u8bcd>=unmanned helicopter; control mechanism; rotor; flybar\\n', '<\u4e2d\u6587\u520a\u540d>=\u673a\u7535\u5de5\u7a0b\\n', '<\u5e74>=2005\\n', '<\u590d\u5408\u5173\u952e\u8bcd>=\u65e0\u4eba\u76f4\u5347\u673a;;\u64cd\u7eb5\u673a\u6784;;\u65cb\u7ffc;;\u7a33\u5b9a\u6746\\n', '<\u673a\u6807\u5173\u952e\u8bcd>=\u65cb\u7ffc\u64cd\u7eb5\u673a\u6784;\u65e0\u4eba\u76f4\u5347\u673a;\u7a33\u5b9a\u6746;\u64cd\u7eb5\u673a\u6784;\u6868\u53f6;\u4e3b\u65cb\u7ffc;\u516d\u81ea\u7531\u5ea6;\u64cd\u7eb5\u7cfb\u7edf;\u9a7e\u9a76\u6746;\u504f\u822a\u529b\u77e9;\\n', '<\u8bed\u79cd>=\u4e2d\u6587;\\n', '<\u51fa\u7248\u5355\u4f4d>=\u673a\u7535\u5de5\u7a0b\\n', '<\u4e3b\u8981\u4e3b\u9898>=\u65e0\u4eba\u76f4\u5347\u673a;\u64cd\u7eb5\u673a\u6784;\\n', '<\u6b21\u8981\u4e3b\u9898>=\u7a33\u5b9a\u6746;\\n']", "documenttype": "\u671f\u520a", "language": "Chinese", "title": "\u4e00\u7c7b\u65e0\u4eba\u76f4\u5347\u673a\u7684\u65cb\u7ffc\u64cd\u7eb5\u673a\u6784\u7684\u5206\u6790", "filepath": "/home/xiaorui/data/zhiwang/CJFD/C031\u671f\u520a.txt", "periodical": "\u673a\u7535\u5de5\u7a0b", "Chinese_title": "\u4e00\u7c7b\u65e0\u4eba\u76f4\u5347\u673a\u7684\u65cb\u7ffc\u64cd\u7eb5\u673a\u6784\u7684\u5206\u6790", "id": "_home_xiaorui_data_zhiwang_CJFD_C031\u671f\u520a.txt35118", "pubdate": "2005", "English_title": "The Analysis of Control Mechanism of a Kind of Unmanned Helicopter", "nodesData": [{"name": "\u4e00\u7c7b\u65e0\u4eba\u76f4\u5347\u673a\u7684\u65cb\u7ffc\u64cd\u7eb5\u673a\u6784\u7684\u5206\u6790", "id": "_home_xiaorui_data_zhiwang_CJFD_C031\u671f\u520a.txt35118", "type": "paper"}, {"name": "\u7aa6\u5c1a\u6210", "id": "\u7aa6\u5c1a\u6210", "type": "author"}, {"name": "\u5218\u4eae", "id": "\u5218\u4eae", "type": "author"}, {"name": "\u673a\u7535\u5de5\u7a0b", "id": "\u673a\u7535\u5de5\u7a0b", "type": "periodical"}], "linksData": [{"source": "\u4e00\u7c7b\u65e0\u4eba\u76f4\u5347\u673a\u7684\u65cb\u7ffc\u64cd\u7eb5\u673a\u6784\u7684\u5206\u6790", "target": "\u7aa6\u5c1a\u6210", "type": "written_by"}, {"source": "\u4e00\u7c7b\u65e0\u4eba\u76f4\u5347\u673a\u7684\u65cb\u7ffc\u64cd\u7eb5\u673a\u6784\u7684\u5206\u6790", "target": "\u5218\u4eae", "type": "written_by"}, {"source": "\u4e00\u7c7b\u65e0\u4eba\u76f4\u5347\u673a\u7684\u65cb\u7ffc\u64cd\u7eb5\u673a\u6784\u7684\u5206\u6790", "target": "\u673a\u7535\u5de5\u7a0b", "type": "from"}]},

      word: '',
      text: '',
      searchLinkData: [],
      keywords: [],
      loading: false,
      nowid: 'AD_2019_0_20200710132603.txt_3011',
      isUpdateSet: false,
      dragging: false,

      svgTitle: '',
      svgType: '',
      svgDetail: '',
      svgId: ''

    }
  },
  mounted () {
    this.loadAll()
  },
  watch: {
    // 监听路由发生改变
    $route: {
      handler (newVal) {
        if (newVal.query.q) {
          this.loadAll()
        }
      }
    }
  },
  methods: {
    querySearch (queryString, cb) {
      var keywords = this.keywords
      var results = queryString ? keywords.filter(this.createFilter(queryString.split(' ').pop())) : keywords
      results = JSON.parse(JSON.stringify(results))
      var word = this.word.split(' ')
      for (var i = results.length - 1; i >= 0; i--) {
        word.pop()
        word.push(results[i].value)
        results[i].value = word.join(' ')
      }
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (item) => {
        return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    loadAll () {
      console.log('loadAll')
      this.nowid = this.$route.query.id

      // Vue.prototype.post('/api/papers', {}, this.getPapersSucc)
      // this.onGetData(this.nowid)\
      this.onGetData('AD_2019_0_20200710132603.txt_3011')
    },
    getPapersSucc (response) {
      if (response.data.error_code === 0) {
        this.dataList = []
        for (var i = 0; i < response.data.data.length; i++) {
          this.dataList.push(response.data.data[i])
        }
      } else {
        alert(Vue.$t('error.getResponse'))
      }
    },
    onGetData (id) {
      console.log('onGetData id:', id)
      this.nowid = id
      Vue.prototype.post('api/getPaperData', {
        id: id
      }, this.onGetDataSucc)
      // this.$axios.post('api/getPaperData')
      //   .then(res => {
      //     this.onGetDataSucc(res)
      //   })
    },
    onGetDataSucc (response) {
      console.log('onGetDataSucc:', response.data)
      if (response.data.error_code === 0) {
        this.retJson = response.request.responseText
        // this.retData = response.data.data
        this.retData = response.data.data
        if (this.retData.raw instanceof Array) {
          this.retData.raw = this.retData.raw.join('')
        }
        // if (!('keywords' in this.retData)) {
        //   this.retData.keywords = this.retData.Chinese_keywords.concat(this.retData.English_keywords)
        // }
        if (!('abstract' in this.retData)) {
          this.retData.abstract = '&emsp;'
          if ('Chinese_abstract' in this.retData) {
            this.retData.abstract += this.retData.Chinese_abstract
          }
          if ('English_abstract' in this.retData) {
            this.retData.abstract += '<br>&emsp;' + this.retData.English_abstract
          }
        } else {
          this.retData.abstract = '&emsp;' + this.retData.abstract
        }
        this.onDraw()
      } else {
        alert(Vue.$t('error.getResponse'))
      }
    },
    onUpdateSet () {
      this.isUpdateSet = !this.isUpdateSet
    },
    onUpdateText () {
      this.$confirm('此操作将修改服务器端文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Vue.prototype.post('/api/updateText', {
          id: this.nowid,
          text: this.retData.raw
        }, this.onUpdateTextSucc)
      }).catch(() => {
      })
    },
    onUpdateTextSucc (response) {
      if (response.data.error_code === 0) {
        this.retData = response.data.data
        this.retData.raw = this.retData.raw.join('')
        this.retJson = response.request.responseText

        this.$message({
          type: 'success',
          message: '修改成功!'
        })
      } else {
        alert(Vue.$t('error.getResponse'))
      }
    },
    onDraw () {
      console.log('onDraw retData:', this.retData)
      const svg = d3.select('svg')
      const width = +svg.attr('width')
      const height = +svg.attr('height')
      const page = this

      // eslint-disable-next-line camelcase
      const links_group = svg.append('g')
      // eslint-disable-next-line camelcase
      const nodes_group = svg.append('g')

      const simulation = d3.forceSimulation()
        .nodes(this.retData.nodesData)
        .force('charge', d3.forceManyBody().strength(-20))
        .force('collide', d3.forceCollide().radius(100).iterations(2))

      simulation
        .force('charge_force', d3.forceManyBody())
        .force('center_force', d3.forceCenter(width / 2, height / 2))

      const node = nodes_group
        .attr('class', 'nodes')
        .selectAll('circle')
        .data(this.retData.nodesData)
        .enter()
        .append('circle')
        .attr('cx', d => d.fx)
        .attr('cy', d => d.fy)
        .attr('r', 40)
        .attr('fill', this.circleColor)
        .attr('stroke', 'BlueViolet')
        .call(d3.drag()
          .on('start', dragstarted)
          .on('drag', dragged)
          .on('end', dragended))
        .on('click', function (d, i) {
          // i
          console.log(d.target.__data__)
          console.log(d.target.__data__.type === 'paper')
          if (d.target.__data__.type === 'paper' || d.target.__data__.type === 'person') {
            const { href } = page.$router.resolve({
              name: d.target.__data__.type,
              query: {
                id: d.target.__data__.id
              }
            })
            console.log(href)
            window.open(href, '_blank')
          }
          d3.select(this).call(dragended)
        })
        .on('mouseover', function (d) {
          // alert(JSON.stringify(d));
          // console.log('mouseover');
          // console.log(d.target.__data__.name);
          page.svgTitle = d.target.__data__.name
          page.svgType = d.target.__data__.type
          page.svgId = d.target.__data__.id
        })

      /* .on('mouseout', function(d) {
          console.log('mouseout');
      }); */

      function dragstarted (event, d) {
        // event, d
        if (!event.active) simulation.alphaTarget(0.3).restart()
        d3.select(this).raise().attr('stroke', 'MintCream')
      }

      function dragged (event, d) {
        d3.select(this).attr('cx', d.fx = event.x).attr('cy', d.fy = event.y)
      }

      function dragended (event, d) {
        // event, d
        if (!event.active) simulation.alphaTarget(0)
        d3.select(this).attr('stroke', 'BlueViolet')
        d3.select(this).attr('cx', d.fx = null).attr('cy', d.fy = null)
      }

      const text = svg.selectAll('text')
        .data(this.retData.nodesData)
        .enter()
        .append('text')
        .style('fill', '#000')
        .attr('dominant-baseline', 'middle')
        .attr('text-anchor', 'middle')
        .attr('font-size', 13)
      const l1 = text
        .append('svg:tspan')
        .attr('x', function (d) {
          return d.x
        })
        .attr('dy', '0.0em')
        .text(function (d) {
          return d.name
        })
      const l2 = text
        .append('svg:tspan')
        .attr('x', function (d) {
          return d.x
        })
        .attr('dy', '1.2em')
      // .text(function(d){return d.name;});

      var edges = []
      var _data = this.retData
      _data.linksData.forEach(function (e) {
        var sourceNode = _data.nodesData.filter(function (n) {
          return n.id === e.source || (n.type === 'paper' && n.name === e.source)
        })[0]
        var targetNode = _data.nodesData.filter(function (n) {
          return n.id === e.target || (n.type === 'paper' && n.name === e.target)
        })[0]
        edges.push({
          source: sourceNode,
          target: targetNode,
          type: e.type
        })
      })
      const link = links_group
        .attr('class', 'links')
        .selectAll('path')
        .data(edges)
        .enter()
        .append('path')
        .style('stroke-width', 2)
        .style('stroke', this.linkColor)
        .attr('id', function (d, i) {
          return 'linkpath' + i
        })
        .attr('marker-end', function (d) {
          return 'url(#' + d.source.name + ')'
        })
      /*
      let marker=svg.append("marker")
          .attr("id", "resolved")
          .attr("markerUnits","userSpaceOnUse")
          .attr("viewBox", "0 -5 10 10")//坐标系的区域
          .attr("refX",5)//箭头坐标
          .attr("refY", -1)
          .attr("markerWidth", 12)//标识的大小
          .attr("markerHeight", 12)
          .attr("orient", "auto")//绘制方向，可设定为：auto（自动确认方向）和 角度值
          .attr("stroke-width",2)//箭头宽度
          .append("path")
          .attr("d", "M0,-5L10,0L0,5")//箭头的路径
          .attr('fill','#000000');//箭头颜色
        */
      const linktext = svg.append('g')
        .attr('class', 'linktext')
        .selectAll('path')
        .data(edges)
        .enter()
        .append('text')
        .style('fill', '#000')
        .attr('dx', 80)
        .attr('dy', 0)
        .style('font-size', '13px')
      // .style('font-weight', 'bold')

      linktext.append('textPath')
        .attr('href', function (d, i) {
          return '#linkpath' + i
        })
        .text(function (d, i) {
          d.i = i
          return d.type
        })

      simulation.on('tick', tickAction)

      function tickAction () {
        node
          .attr('cx', (d) => {
            return d.x
          })
          .attr('cy', (d) => {
            return d.y
          })

        link
          .attr('d', function (d) {
            return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y
          })
          .attr('marker-end', 'url(#resolved)')

        text
          .attr('x', (d) => {
            return d.x
          })
          .attr('y', (d) => {
            return d.y
          })
        l1
          .attr('x', (d) => {
            return d.x
          })
          .attr('y', (d) => {
            return d.y
          })
        l2
          .attr('x', (d) => {
            return d.x
          })
          .attr('y', (d) => {
            return d.y
          })
      }

      const linkForce = d3.forceLink(edges)
        .id((d) => {
          return d.name
        })

      simulation.force('links', linkForce)
    },
    circleColor (d) {
      if (d.type === 'person') {
        return 'pink'
      } else if (d.type === 'paper') {
        return 'PowderBlue'
      } else {
        return 'LightGray'
      }
    },
    linkColor (d) {
      if (d.type === 'Author') {
        return 'DeepPink'
      } else {
        return 'SlateBlue'
      }
    },
    handleClick () {
      this.searchLinkData = []
    }
  }
}
</script>

<style lang='scss' scoped>
.page-two {
  font-size: 50px;
  //color: #fff;
  //background-color: # 6db9ff;
  box-sizing: border-box;
  padding-left: 20px;
  padding-top: 50px;
}

.clear {
  display: flex;
  width: 62%;
  justify-content: space-between;

  .el-select {
    width: 24%;
  }
}

.el-row {
  margin-bottom: 1vh;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 5px;
  align-items: center;
}

.bg-card {
  //background: #d3dce6;
  color: #000;
  font-weight: bold;
  text-align: left;
}

.bg-card-light {
  color: #000;
  text-align: left;
  font-size: 14px;
  //background: #e5e9f2;
}

.grid-content {
  font-size: 14px;
  padding: 1vh 1vw;
  border-radius: 5px;
  align-items: center;
  //min-height: 2vh;
}

.inline-input {
  width: 62%;
}

.tabs {
  width: 90%;
  text-align: left;
}

/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: rgba(240, 240, 240, 1);
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  border-radius: 10px;
  background-color: rgba(240, 240, 240, .5);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(120, 120, 120, .5);
  background-color: rgba(120, 120, 120, .5);
}
</style>
